<template>
  <div>
    <div class="right-tool" v-if="isShowRightToolbar">
      <RightToolbar @queryTable="queryTable" :columns="tableConfig"></RightToolbar>
    </div>
    <ux-grid ref="tableComponentsRef" style="width: 100%" border widthResize :height="tableBaseConfig.height" :data="tableData" column-key
      :resizable="true" stripe :row-height="60" :indent="tableBaseConfig.indent" :header-cell-style="tableBaseConfig.headerStyle"
      :show-header="tableBaseConfig.showHeader" :highlight-current-row="tableBaseConfig.showHighlightRow"
      :default-expand-all="treeConfig.defaultExpandAll" :tree-props="treeConfig.treeProps" :expand-row-keys="treeConfig.expandRowKeys"
      :size="sizeTable" :max-height="tableBaseConfig.maxHeight" @selection-change="handleSelectionChange" @select="rowSelect" @select-all="selectAll"
      @row-click="handleRowClick">
      <!-- 选择 -->
      <ux-table-column v-if="isSelect" type="checkbox" width="55" align="center" reserve-selection />
      <!-- 序号 -->
      <ux-table-column v-if="isIndex" type="index" width="70" title="序号" align="center">
        <template #header>
          <div class="headerStyle">序号</div>
        </template>
      </ux-table-column>
      <!-- 正常行 start -->
      <template v-for="(item, index) in tableConfig">
        <ux-table-column :key="item.prop" v-if="isShowRightToolbar ? tableConfig[index].visible : true" :label="item.label" :title="item.label"
          :field="item.prop" resizable :width="item.width" :sortable="item.sortable && true" :align="item.align ? item.align : 'center'"
          :show-overflow-tooltip="item.showTooltip ? item.showTooltip() : true">
          <template #header>
            <el-tooltip placement="top" title="" :content="item.label" :offset="15">
              <div class="headerStyle">{{ item.label }}</div>
            </el-tooltip>
          </template>
          <template v-slot="{ row }">
            <template v-if="row.isHandle && item.isEdit">
              <!-- input type-->
              <el-input v-if="item.isType === 'Input'" v-model="row[item.prop]" :placeholder="item.placeholder" :size="item.size || 'small'"
                :clearable="item.clearable || true" @input="item.method && item.method(row, item.prop)"></el-input>
              <el-input-number v-if="item.isType === 'InputNum'" v-model="row[item.prop]" :label="item.label" :size="item.size || 'small'"
                :clearable="item.clearable || true" @input="item.method && item.method(row, item.prop)"></el-input-number>
              <!-- select type-->
              <el-select v-if="item.isType === 'Select'" style="width: 100%" v-model="row[item.prop]" :placeholder="item.placeholder"
                :size="item.size || 'small'" :clearable="item.clearable || true" :multiple="item.multiple" :remote="item.remote"
                :remote-method="item.remoteMethod" :collapse-tags="item.collapseTags" :multiple-limit="item.multipleLimit"
                :filterable="item.filterable" @change="item.method && item.method(row, item.prop)">
                <el-option v-for="(opItem, index) in item.options" :key="index" :label="opItem.label" :value="opItem.value">
                  <template v-if="opItem.rightHint">
                    <span style="float: left">{{ opItem.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 16px">
                      {{ opItem.rightHint }}
                    </span>
                  </template>
                  <template v-else>
                    {{ opItem.label }}
                  </template>
                </el-option>
              </el-select>
              <!-- date type -->
              <el-date-picker v-if="item.isType === 'Date'" :type="item.isDateType || 'date'" style="width: 100%" v-model="row[item.prop]"
                :placeholder="item.placeholder" :size="item.size || 'small'" :clearable="item.clearable || true" :format="item.format || 'yyyy-MM-dd'"
                :value-format="item.valueFormat || 'yyyy-MM-dd'" @change="item.method(row, item.prop)"></el-date-picker>
              <!-- radio type -->
              <el-radio-group v-if="item.isType === 'Radio'" v-model="row[item.prop]" :placeholder="item.placeholder" :size="item.size || 'small'"
                :clearable="item.clearable || true" @change="item.method(row, item.prop)">
                <el-radio :label="opItem.label" v-for="(opItem, index) in item.options" :key="index" :rules="item.rules"></el-radio>
              </el-radio-group>
              <!-- switch type -->
              <el-switch v-if="item.isType === 'Switch'" class="switch-btn-style" v-model="row[item.prop]" :clearable="item.clearable || true"
                :size="item.size || 'small'" :active-color="variables.switchActiveColor" :inactive-color="variables.switchInactiveColor"
                :active-icon-class="variables.switchActiveIconClass" :active-text="item.activeText" :inactive-text="item.inactiveText"
                @change="item.method && item.method()"></el-switch>
              <span v-if="item.isHandleBtn === 'Link'" class="m-l-10">
                <el-link :underline="false" :type="item.isHandleType" @click.native.prevent="item.isHandleMethod(row, index)">
                  {{ item.isHandleText }}
                </el-link>
              </span>
            </template>
            <!-- 普通表格 -->
            <template v-else>
              <slot v-if="item.isSlot" :name="item.prop" :row="row"></slot>
              <!-- 如果是链接 -->
              <el-link v-else-if="item.isLink" :underline="false" :type="item.type" @click.native.prevent="item.method(row, index)"
                style="text-align: left">
                {{
                  row[item.prop] || row[item.prop] == 0 ? row[item.prop] : "---"
                }}
              </el-link>
              <!-- 如果是button -->
              <el-button v-else-if="item.isButton" :size="item.size || 'mini'" :type="item.type" :disable="item.disable ? item.disable(row) : false"
                :plain="item.plain || false" :round="item.round || false" :icon="item.icon || ''" :circle="item.circle || false"
                @click.native.prevent="item.method(row, index)">
                {{ row[item.prop] ? row[item.prop] : "---" }}
              </el-button>
              <!-- 如果是tag -->
              <el-tag v-else-if="item.isTag" :size="item.size || 'mini'" :type="item.type">{{ row[item.prop] ? row[item.prop] : "---" }}
              </el-tag>
              <!-- 如果有 icon -->
              <span v-else-if="item.isArrow">
                <span>
                  <i :class="[item.isArrow(row).icon, item.isArrow(row).color]"></i>
                </span>
                <span :class="item.isArrow(row).color">{{ row[item.prop] ? row[item.prop] : "---" }}
                </span>
              </span>
              <!-- 状态前圆点 -->
              <span v-else-if="item.isStatus">
                <span class="circle" :class="item.isStatus(row).bgColor"></span>&nbsp;&nbsp;
                <span :class="item.isStatus(row).color">
                  {{ row[item.prop] ? row[item.prop] : "---" }}
                </span>
              </span>
              <!-- 状态前圆点可以切换字段展示 -->
              <span v-else-if="item.isStatusDouble">
                <span class="circle" :class="item.isStatusDouble(row).bgColor"></span>&nbsp;&nbsp;
                <span :class="item.isStatusDouble(row).color">
                  {{ item.isStatusDouble(row).label }}
                </span>
              </span>
              <!--颜色字体 -->
              <span v-else-if="item.isColor">
                <span :class="item.isColor(row)">
                  {{ row[item.prop] ? row[item.prop] : "---" }}
                </span>
              </span>
              <!-- 进度条 -->
              <div v-else-if="item.isProgress" style="width: 100%">
                <el-progress :percentage="row[item.prop] ? Number(row[item.prop]) : 0" :color="item.isProgress"></el-progress>
              </div>
              <div v-else-if="item.popOver">
                <el-popover v-if="item.popOver(row).isPop" :title="item.popOver(row).title" :trigger="item.popOver(row).trigger || 'click'">
                  <p style="position: relative" v-for="item in item.popOver(row).content" :key="item">
                    <span class="round"></span>{{ item }}
                  </p>
                  <div slot="reference" class="primary">
                    <svg-icon class="svg-icon iconStyle" style="margin-right: 8px"
                      :icon-class="item.popOver(row).iconClass" />{{ item.popOver(row).name || "--" }}
                  </div>
                </el-popover>
                <span v-else>
                  <svg-icon class="svg-icon iconStyle" style="margin-right: 8px"
                    :icon-class="item.popOver(row).iconClass" />{{ item.popOver(row).name || "--" }}</span>
              </div>
              <el-link v-else-if="item.isMethod" :underline="false" :type="item.isMethod(row).type" @click.native.prevent="item.method(row, index)"
                style="text-align: left">
                <span :title="item.isMethod(row).name">{{
                  item.isMethod(row).name || "--"
                }}</span>
              </el-link>
              <!-- 嵌套内容 -->
              <span v-else-if="item.showProp">
                {{ item.showProp(row) }}
              </span>
              <div v-else-if="item.showHint" :title="item.showHint(row) && item.showHint(row).name" class="ellipsis">
                {{ (item.showHint(row) && item.showHint(row).name) || "--" }}
              </div>
              <span v-else-if="item.showArr">
                <p v-for="(item, index) in item.showArr(row).arr" :key="item">
                  {{ index + 1 }}、{{ item }}
                </p>
              </span>
              <!-- 无内容时显示 -->
              <span v-else :title="row[item.prop]" style="cursor: pointer">
                {{
                  row[item.prop] || row[item.prop] == 0 ? row[item.prop] : "---"
                }}
              </span>
            </template>
          </template>
        </ux-table-column>
      </template>
      <!-- 正常行 end -->
      <!-- 操作 start  -->
      <ux-table-column v-if="
          tableAction &&
          tableAction.operations &&
          tableAction.operations.length > 0
        " label="操作" align="center" fixed="right" resizable :width="tableAction.width ? tableAction.width() : null">
        <template #header>
          <div class="headerStyle">操作</div>
        </template>
        <template v-slot="{ row }">
          <span v-for="(item, index) in tableAction.operations" :key="index">
            <slot v-if="item.isSlot" :name="item.prop" :row="row"></slot>
            <span class="item-btn" v-else-if="
                item.isShow
                  ? item.isShow(row)
                  : item.isShow
                  ? item.isShow()
                  : true
              ">
              <el-link v-if="item.isLink" :underline="false" :type="item.type" :disable="item.disable ? item.disable(row) : false"
                @click.native.prevent="item.method(row, index)">
                {{ item.label }}
              </el-link>
              <el-dropdown v-else-if="item.dropdown">
                <span class="el-dropdown-link">
                  {{ item.label
                  }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(items, keyS) in item.dropArr" :key="keyS" @click.native.prevent="items.method(row, index)">
                    <div v-if="items.isShow ? items.isShow(row) : true">
                      <span v-if="items.type == 'danger'" style="color: red">{{
                        items.name
                      }}</span><span v-else style="color: #5272ec">{{
                        items.name
                      }}</span>
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button class="item-btn" v-else :size="item.size || 'mini'" :type="item.type" :disable="item.disable ? item.disable(row) : false"
                :plain="item.plain || false" :round="item.round || false" :icon="item.icon || ''" :circle="item.circle || false"
                @click.native.prevent="item.method(row, index)">
                {{ item.label }}
              </el-button>
            </span>
          </span>
        </template>
      </ux-table-column>
      <!-- 操作 end -->
    </ux-grid>
    <div class="text-center btn-border" v-if="isAdd" @click="addFun">
      <el-button type="text" icon="el-icon-plus">添加</el-button>
    </div>
    <pagination v-show="isShowPage && queryParams.total > 0" :total="queryParams.total" :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pageSize" :alignStyle="queryParams.alignStyle" @pagination="getPagination" />
  </div>
</template>

<script>
import variables from "@/theme/style.less";
export default {
  props: {
    isAdd: {
      type: Boolean,
      default: false,
    },
    maxHeight: {
      type: String,
      default: "auto",
    },
    sizeTable: {
      type: String,
      default: "medium",
    },
    // 有分页序号
    isPageIndex: {
      type: Boolean,
      default: false,
    },
    // 没分页的序号
    isIndex: {
      type: Boolean,
      default: false,
    },
    isShowRightToolbar: {
      type: Boolean,
      default: false,
    },
    // 展示分页
    isShowPage: {
      type: Boolean,
      default: false,
    },
    // 分页信息
    queryParams: {
      type: Object,
      default: () => ({
        total: 0,
      }),
    },
    // 是否选择
    isSelect: {
      type: Boolean,
      default: false,
    },
    // 列表数据
    tableData: {
      type: Array,
      default: () => [],
    },
    // 表头配置
    tableConfig: {
      type: Array,
      default: () => [],
    },
    // 操作
    tableAction: {
      type: Object,
      default: () => ({}),
    },
    // 树结构
    treeConfig: {
      type: Object,
      default: () => ({}),
    },
    // 行key值
    rowKey: {
      type: String,
      default: () => "id",
    },
    // 表格属性的对象
    tableBaseConfig: {
      type: Object,
      default: () => {
        return {
          border: true,
          height: null,
          indent: 16,
          headerStyle: {},
        };
      },
    },
  },
  watch: {
    tableData: {
      deep: true,
      handler() {
        // 防止抖动处理
        // this.isShowTable = false;
        // this.$nextTick(() => {
        //   this.isShowTable = true;
        //   if (this.$refs.tableComponentsRef) {
        //     this.$refs.tableComponentsRef.doLayout();
        //   }
        // });
      },
    },
  },
  computed: {
    variables() {
      return variables;
    },
  },
  created() { },
  mounted() {
    window.addEventListener("resize", this.handleResize);
  },
  destroyed() {
    window.removeEventListener("resize", this.handleResize);
  },
  data() {
    return {
      isShowTable: true,
    };
  },
  methods: {
    handleResize() {
      this.$nextTick(() => {
        if (this.$refs.tableComponentsRef) {
          this.$refs.tableComponentsRef.doLayout();
        }
      });
    },
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    rowSelect(selection, row) {
      this.$emit("rowSelect", selection, row);
    },
    selectAll(val) {
      this.$emit("selectAll", val);
    },
    handleRowClick(row) {
      this.$emit("handleRowClick", row);
    },

    clearSelection() {
      this.$refs.tableComponentsRef.clearSelection();
    },
    toggleRowSelection(row) {
      this.$refs.tableComponentsRef.toggleRowSelection(row);
    },
    setCurrentRow(row) {
      this.$refs.tableComponentsRef.setCurrentRow(row);
    },
    getPagination() {
      this.$emit("getPagination");
    },
    addFun() {
      this.$emit("add");
    },
    // 刷新
    queryTable() {
      this.$emit("queryTable");
    },
  },
};
</script>

<style lang="less" scoped>
  .item-btn {
    margin-right: 10px;
    // &:first-child {
    //   margin-left: 0;
    // }
  }
  .right-tool {
    position: absolute;
    right: 0;
    top: 0px;
  }
  // .text-center {
  //   text-align: center;
  // }

  .btn-border {
    border-bottom: 2px dotted #ebeef5;
    border-left: 2px dotted #ebeef5;
    border-right: 2px dotted #ebeef5;
  }
  .headerStyle {
    text-align: center;
    font-size: 18px;
    font-weight: bolder;
    color: #000;
  }
  .round {
    background-color: #ccc;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .el-dropdown-link {
    color: #5272ec;
    position: relative;
    top: 2px;
    cursor: pointer;
  }
  .iconStyle {
    width: 16px;
    height: 20px;
    position: relative;
    top: 4px;
  }
  .primary {
    color: #5272ec;
    cursor: pointer;
  }
  ::v-deep .elx-header--column.col--ellipsis > .elx-cell .elx-cell--title {
    width: 100%;
    text-align: center !important;
    font-size: 18px;
    font-weight: bolder;
    color: #000;
  }
</style>
